<script setup lang="ts" name="record">
import {ref, onMounted, reactive} from "vue";
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRoute, useRouter } from "vue-router";
import { useFinanceApi } from "/src/api/finance";

import MainColumns from "/@/components/common/main-columns.vue";
import MainHeader from "/@/components/common/main-header.vue";

const router = useRouter();
const route = useRoute();
const lxsAppData = reactive({
	tab: {
		type: ref(1),
		secondName: ref('')
	},
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			page: 1,
			page_size: 10,
			data_time: '',
		}
	},
	platformData: [
		{name: '提现', path: '/finance'},
		{name: '提现记录', path: '/finance/record'},
		{name: '收益明细', path: '/finance/income'},
	],
})

// 左侧平台点击
const platformDataClick = (index) => {
	if (lxsAppData.tab.type === index) return
	router.push({
		path: lxsAppData.platformData[index].path
	})
}

// 搜索时间点击
const dataTimeChange = (val) => {
	lxsAppData.tableData.param.data_time = val;
	getPageData();
}

// 获取页面数据
const getPageData = async () => {
	lxsAppData.tableData.loading = true;
	const res = await useFinanceApi().getWithdrawData(lxsAppData.tableData.param);
	setTimeout(() => {
		lxsAppData.tableData.loading = false;
	}, 500);
	console.log('获取财务提现页面数据', res.data);
	lxsAppData.tableData.data = res.data.lists.data;
	lxsAppData.tableData.total = res.data.lists.total;
}
// 分页改变
const onHandleSizeChange = (val) => {
	lxsAppData.tableData.param.page_size = val;
	getPageData();
};
// 分页改变
const onHandleCurrentChange = (val) => {
	lxsAppData.tableData.param.page = val;
	getPageData();
};
onMounted(() => {
	lxsAppData.tab.secondName = lxsAppData.platformData[lxsAppData.tab.type].name;
	getPageData();
});
</script>

<template>
	<div class="layout-container flex">

		<MainColumns :active="lxsAppData.tab.type" :items="lxsAppData.platformData" @click="platformDataClick" />

		<div class="layout-main">

			<MainHeader :second-name="lxsAppData.tab.secondName"/>

			<div class="main-content">

				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
						<el-form-item label="日期">
							<el-date-picker
								v-model="lxsAppData.tableData.param.data_time"
								type="datetimerange"
								start-placeholder="开始时间"
								end-placeholder="结束时间"
								format="YYYY-MM-DD HH:mm:ss"
								value-format="YYYY-MM-DD HH:mm:ss"
								size="small"
								clearable
								@change="dataTimeChange"
							/>
						</el-form-item>
					</el-col>
				</el-row>

				<el-card shadow="hover" class="layout-padding-auto mt10">

					<el-table
						:data="lxsAppData.tableData.data"
						v-loading="lxsAppData.tableData.loading"
						size="small"
						:header-cell-style="{backgroundColor: '#EEF1F5', color: '#010101'}"
						highlight-current-row
						style="width: 100%"
                        empty-text="暂无记录"
					>
						<el-table-column prop="payee" label="收款人" show-overflow-tooltip max-width="90">
							<template #default="scope">
								<span>{{ scope.row.order_info.payee }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="account" label="收款账号" show-overflow-tooltip max-width="150">
							<template #default="scope">
								<span>{{ scope.row.order_info.account }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="type_value" label="收款方式" show-overflow-tooltip max-width="90"></el-table-column>
						<el-table-column prop="amount" label="提现金额" show-overflow-tooltip max-width="90"></el-table-column>
						<el-table-column prop="status" label="状态" show-overflow-tooltip max-width="90">
							<template #default="scope">
								<el-tag v-if="scope.row.status == 1">已申请</el-tag>
								<el-tag type="danger" v-else-if="scope.row.status == 2">失败</el-tag>
								<el-tag type="success" v-else-if="scope.row.status == 3">已完成</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="create_time" label="申请时间" show-overflow-tooltip max-width="150"></el-table-column>
					</el-table>

					<div class="table-footer">
						<el-pagination
							small
							hide-on-single-page
							@size-change="onHandleSizeChange"
							@current-change="onHandleCurrentChange"
							class="mt15"
							:pager-count="5"
							:page-sizes="[10, 20, 30]"
							v-model:current-page="lxsAppData.tableData.param.page"
							background
							v-model:page-size="lxsAppData.tableData.param.page_size"
							layout="total, sizes, prev, pager, next, jumper"
							:total="lxsAppData.tableData.total"
						>
						</el-pagination>
					</div>

				</el-card>

			</div>

		</div>

	</div>
</template>

<style scoped lang="scss">
.layout-padding-auto {
	height: 76vh;
	position: relative;
}
.table-footer {
	width: 95%;
	position: absolute;
	bottom: 0;
	background-color: #fff;
	padding-bottom: 10px;
	box-shadow: inset 0px 1px 0px 0px #DADEE6;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>